<?php echo $this->Html->css('admin/admin_organisations_index'); ?>
<style>
    .big_group {
        border: solid #ccc 1px;
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 1px 1px 4px #ccc;
        display: block;
        height: 350px;
    }

    .groups_list {
        display: table;
        width: 100%;
    }
    .groups_list, .groups_list ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

    .groups_list ul {
        overflow: auto;
        height: 200px;
    }

    .groups_list ul li {
        padding: 3px;
        overflow: hidden;
    }

    .groups_list ul li:hover {
        background-color: #f9f9f9;
    }

    .groups_list ul li.selected {
        background-color: #f9f9f9;
    }

    .groups_list .category_name {
        font-weight: bold;
        padding: 4px;
        width: 70%;
        cursor: pointer;
    }

    .groups_list .group_name, .groups_list .date_name {
        padding: 4px;
        cursor: pointer;
        width: 78%;
    }

    .groups_list .editable {
        border: solid #eee 2px;
        box-shadow: inset -1px -1px 3px #f9f9f9;
        padding: 2px;
        border-radius: 4px;
        background-color: #fff;
    }

    .groups_list .disabled {
        color: #f5f5f5;
        text-shadow: 0px 1px 1px #fafafa;
    }

    .groups_list .options {
        text-align: right;
        padding: 3px;
    }

    .groups_list .options a {
        color: #0088cc;
        text-decoration: none;
        padding: 5px;
    }

    .groups_list .column {
        display: table-cell;
        min-height: 200px;
        border-right: solid #f8f8f8 1px;
    }

    /*    .groups_list .column:not(:last-child) {
            border-right: solid #f8f8f8 1px;
        }*/

    .groups_list .column header {
        border-bottom: solid #f8f8f8 1px;
        overflow: hidden;
        vertical-align: middle;
        padding: 0px 4px;
        box-sizing: border-box;
    }

    .groups_list .column header h5 {

    }

    .groups_list .column header .btn {
        margin-top: 5px;
    }
</style>

<div class="wrapper" id="container">

    <div class="row">

        <div class="col-lg-9">
            <div class="panel">
                <div class="panel-heading">
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active"><a href="#home" data-toggle="tab">Organization Info</a></li>
                        <li class=""><a href="#profile" data-toggle="tab">Organization Account</a></li>
                    </ul>
                </div>
                <div class="panel-body">

                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade active in" id="home">
                            <div class="row">
                                <div class="span8">
                                    <?php foreach ($organisation as $value) { ?>                                                 
                                        <form action="<?php echo $this->Html->url(array('action' => 'add')); ?>" method ="post" id="profile-form" class="form-horizontal">
                                            <fieldset> 
                                                <div class="row-fluid">
                                                    <div class="span5">
                                                        <div class="control-group">
                                                            <label class="control-label" for="name"> * Name </label> 
                                                            <div class="controls">
                                                                <input type ="text" name="Organisation[name]" id ="name" required="" value="<?php echo $value['name']; ?>" />
                                                            </div>
                                                        </div>

                                                        <div class="control-group"> 
                                                            <label class="control-label" for="email"> Email </label> 
                                                            <div class="controls">
                                                                <input type ="text" name="Organisation[email]" id ="email" value="<?php echo $value['email']; ?>"/>
                                                            </div> 
                                                        </div>

                                                        <div class="control-group">
                                                            <label class="control-label" for="phone"> * Phone </label> 
                                                            <div class="controls">
                                                                <input type ="text" name="Organisation[phone]" id ="phone" required="" value="<?php echo $value['phone']; ?>" />
                                                            </div> 
                                                        </div>

                                                        <div class="control-group">
                                                            <label class="control-label" for="website"> * Website </label> 
                                                            <div class="controls">
                                                                <input type ="text" name="Organisation[website]" id ="website" required="" value="<?php echo $value['website']; ?>" />
                                                            </div> 
                                                        </div>

                                                        <div class="control-group">
                                                            <label class="control-label" for="website"> * Address </label> 
                                                            <div class="controls">
                                                                <input type ="text" name="Organisation[address]" id ="address" required="" value="<?php echo $value['address']; ?>"/>
                                                            </div> 
                                                        </div>


                                                    </div>
                                                </div>
                                            </fieldset>
                                        <?php } ?>
                                    </form>
                                </div>
                                <div class="span4">
                                    <h5>Logo</h5>
                                    <img src="http://placehold.it/170x170">
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span12">
                                    <div class="form-actions">
                                        <button type="submit" class="btn" id="submit-btn"><i class="icon icon-save"></i> Submit</button>
                                        <button type="button" class="btn" id="cancel-btn"><i class="icon icon-remove"></i> Cancel</button>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="tab-pane fade" id="profile">
                            <div class="row-fluid">
                                <div class="span3">
                                    <div class="header">
                                        <div class="pull-right">
                                            <div class="btn-group">

                                                <button class="btn dropdown-toggle btn-small" data-toggle="dropdown" title="Bulk Actions For Multiple Selected Records">
                                                    <i class="icon-cog"></i> Actions
                                                    <span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu pull-right">
                                                    <li><a id="delete-menu" href="<?php echo $this->Html->url(array('action' => 'delete')); ?>"><i class="icon icon-trash"></i> Delete</a></li>
                                                </ul>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="span9">
                                    <div class="header">   
                                        <div class="header">   
                                            <div class="pull-right">
                                                <button class="btn btn-small btn-info" type="button">Edit Account</button>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span3">
                                    <div id='table-view'>
                                        <table class = "table table-condensed table-striped">
                                            <tbody>
                                                <?php foreach ($organisation_accounts as $value) { ?>
                                                    <tr>
                                                        <td><input type="checkbox" class="checkbox" value=""></td>
                                                        <td><?php echo $value['OrganisationAccount']['last_name'] . ' ' . $value['OrganisationAccount']['first_name']; ?></td>
                                                    </tr>
                                                <?php } ?>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="span9">
                                    <div class="row-fluid">
                                        <h5>Profile</h5>
                                        <table class="table table-condensed details_table condensed">
                                            <tr>
                                                <td>Username:</td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>First Name:</td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>Last Name:</td>
                                                <td></td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>



                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="panel">
                <div class="panel-heading">

                    <h4>Groups And Associations</h4>

                    <p>
                        Click on a Group name on the left to load the subgroups under it. <b>Double-Click</b> on the Group or Subgroup name 
                        to edit it.
                    </p>
                </div>

                <div class="panel-body">
                    <section id="groups_list" class="groups_list" data-url="<?php echo $this->Html->url(array('controller' => 'organisation', 'action' => 'admin_org_groups')); ?>">
                        <div class="col-lg-6 column">
                            <header>
                                <h5 class="pull-left">Groupings</h5>
                                <button class="btn btn-small pull-right" id="add_category"><i class="fa fa-plus"></i></button>
                            </header>

                            <ul id="categories">
                                <?php foreach ($categories as $category) { ?>
                                    <li style="overflow: hidden;">
                                        <div class="category_name pull-left" data-id="<?php echo $category['OrganisationGroupType']['id']; ?>">
                                            <?php echo $category['OrganisationGroupType']['name']; ?>
                                        </div>

                                        <div class="options pull-right">
                                            <a href="#" class="remove-link" data-id="<?php echo $category['OrganisationGroupType']['id']; ?>">
                                                <i class="fa fa-trash-o"></i>
                                            </a>

                                            <i class="fa fa-angle-right"></i>
                                        </div>
                                    </li>
                                <?php } ?>
                            </ul>
                        </div>

                        <div class="col-lg-6 column">
                            <header>
                                <h5 class="pull-left">Sub Groups</h5>
                                <button class="btn btn-small pull-right" id="add_group" disabled=""><i class="fa fa-plus"></i></button>
                            </header>

                            <ul id="groups"></ul>
                        </div>

                    </section>
                </div>
            </div>
        </div>

        <div class="col-lg-3">
            <div class="panel">
                <header class="panel-heading">
                    <h4>Special Dates</h4>

                    <p>Use the button below to add new special dates to collect for members</p>
                </header>

                <div class="panel-body">
                    <section class="groups_list">
                        <div class="column">
                            <header style="overflow: hidden;">
                                <h5 class="pull-left">Date Types</h5>
                                <button class="btn btn-small pull-right" id="add_date"><i class="fa fa-plus"></i></button>
                            </header>

                            <ul id="dates">
                                <?php foreach ($dates as $date) { ?>
                                    <li style="overflow: hidden;">
                                        <div class="date_name pull-left" data-id="<?php echo $date['OrganisationAnniversary']['id']; ?>">
                                            <?php echo $date['OrganisationAnniversary']['name']; ?>
                                        </div>

                                        <div class="options pull-right">
                                            <a href="#" class="remove-link" data-id="<?php echo $date['OrganisationAnniversary']['id']; ?>">
                                                <i class="fa fa-remove"></i>
                                            </a>
                                        </div>
                                    </li>
                                <?php } ?>
                            </ul>
                        </div>

                    </section>
                </div>
            </div>
        </div>

    </div>
</div>

<?php
echo $this->Html->script('plugins/jquery.trocar/jquery.trocar.js');
echo $this->Html->script('app/views/organisations/admin_org_groups.js');
?>